<template>
    <div class="publish-message">
        <el-form :model="form" label-width="70px" style="margin-top:50px;">
            <el-form-item label="添加图片">
                <el-upload v-model:file-list="fileList" :action="uploadUrl" :headers="uploadHeaders"
                    list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :on-success="handleSuccess" :on-change="handleChange" :class="{ disUoloadSty: noneBtnImg }"
                    :on-error="handleError" :limit="3">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.title" style="width:800px;" placeholder="添加标题"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input type="textarea" style="width:800px;" v-model="form.content" placeholder="添加内容"></el-input>
            </el-form-item>
            <el-form-item label="定价">
                <el-input v-model="form.price" style="width:100px;"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="success" @click="publishClick">发布信息</el-button>
    </div>
</template>

<script lang="ts" setup>
import type { UploadProps, UploadUserFile } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { AddOrderAPI } from '../api/order'


const { type } = defineProps({
    type: {
        type: String,
        default: 'goods'
    },
})

const form = reactive({
    title: '',
    content: '',
    price: 0,
    picture: '',
    type: type,
    userId: localStorage.getItem("userId") as string
})


function publishClick() {
    if (form.title === '' || form.content === '' || form.price === 0 || fileList.value.length === 0) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (fileList.value.length !== 0) {
        form.picture = (fileList.value[0] as any).response.data;
    }
    AddOrderAPI(form)
        .then((res) => {
            if (res.code === 200 && res.msg !== null) {
                ElMessage.success(res.msg)
            }
            if (res.code === 100 && res.msg !== null) {
                ElMessage.error(res.msg)
            }

        })
}


const uploadUrl = "/api/order/uploadOrderPicture";
const uploadHeaders = {
    "Authorization": "Bearer " + localStorage.getItem("x-auth-token"),
}

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}

const handleSuccess: UploadProps['onSuccess'] = (res, uploadFile) => {
    console.log(res, uploadFile)
    ElMessage.success(res.msg)
    console.log(fileList.value)
}

const limitCountImg = 3;
let noneBtnImg = false;
const handleChange: UploadProps['onChange'] = (uploadFiles, uploadFileList) => {
    console.log(uploadFiles, uploadFileList)
    // 自动会往fileList添加文件
    if (fileList.value.length > limitCountImg) {
        ElMessage.error("超出上传文件个数")
    }
    noneBtnImg = fileList.value.length >= limitCountImg
}

const handleError: UploadProps['onError'] = (err, uploadFile) => {
    console.log(err, uploadFile)
}

</script>

<style lang="less" scoped>
.disUoloadSty .el-upload--picture-card {
    display: none;
    /* 上传按钮隐藏 */
}

.publish-message {
    width: 1100px;
    margin: 20px auto;
    padding: 10px 20px;

    .orders-img_el_upload {
        width: 1000px;
        float: left;
        height: 148px;

        .el-upload {
            //   width: 50px;
            //   height: 20px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            &:hover {
                border-color: #409eff;
            }

            .el-upload__input {
                position: absolute;
                left: -1000px;
            }
        }
    }

    .title {
        width: 1100px;
        height: 60px;
        margin-top: 50px;
        font-size: 22px;
        outline: none;
        border: none;
        border-bottom: 1px solid black;
    }

    .content {
        font-size: 18px;
        width: 1200px;
        resize: none;
        outline: none;
        border: none;
        border-bottom: 1px solid black;
    }

    .price {
        font-size: 20px;

        .price-input {
            width: 100px;
            outline: none;
            border: none;
            margin: 0 20px;
        }
    }

    .el-button {
        width: 120px;
        height: 50px;
        margin-top: 20px;
        margin-left: 540px;
        font-size: 20px;
    }
}
</style>